<template>
    <div class="dictionary-page">
        <div class="type-top-box">
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="系统名称：">
                   <el-autocomplete
                        size="small"
                        v-model="formInline.sys"
                        :fetch-suggestions="querySysList"
                        placeholder="请选择"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="initData()">查询</el-button>
                </el-form-item>
                <div class="right-outlogin">
                    <span class="add-user" @click="adddictionary()"><i class="el-icon-circle-plus"></i>新增</span>
                </div>
            </el-form>
        </div>
        <el-table v-loading="thisLoading" :border="true" :data="tableData" size="small" height="68vh">
            <el-table-column align="center" label="所属系统">
                <template slot-scope="scope">
                    <span class="ad-name" @click="setSysMsg(scope.row)">{{scope.row.sys}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="parentCode" label="父编码"></el-table-column>
            <el-table-column align="center" prop="code" label="编码"></el-table-column>
            <el-table-column align="center" prop="value" label="字典值"></el-table-column>
            <el-table-column align="center" prop="params" label="参数"></el-table-column>
            <el-table-column align="center" label="是否软删">
                <template slot-scope="scope">
                    <span>{{scope.row.deleteFlag=='1'?'是':'否'}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-total">
            <pagination-table
                :total="total"
                :currentPage="pageIndex"
                :pagesize="formInline.pageSize"
                @pageChange="pageChange"
                @sizeChange="sizeChange"
            ></pagination-table>
        </div>
        <add-edit-dictionary ref="dictionary" @updataList="initData()" @deleteThis="openThisPop"></add-edit-dictionary>
    </div>
</template>
<script>
import Vue from "vue";
import { alertMessage } from "@/config/myUtil";
import addeditdictionary from "./components/addeditdictionary";
import PaginationTable from "@/components/public/paginationTable";
import { sysListDataApi , dictionaryListApi , dictionarydeleteApi} from "@/api/getData";
import { Form, FormItem, Table, TableColumn , Autocomplete} from "element-ui";
Vue.use(Form);
Vue.use(Table);
Vue.use(FormItem);
Vue.use(TableColumn);
Vue.use(Autocomplete);
export default {
    name:'dictionary',
    components: {
        "pagination-table": PaginationTable,
        "add-edit-dictionary":addeditdictionary,
    },
    data(){
        return {
            total:20,
            tableData:[],
            pageIndex:1,
            formInline:{
                sys:"",
                pageIndex:0,
                pageSize:20,
            },
            thisLoading:false,
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        async initData(param){
            try {
                if(!param){
                    this.formInline.pageIndex = 0;
                    this.pageIndex = 1;
                    this.total = 0;
                }
                this.thisLoading = true;
                let data = await dictionaryListApi(this.formInline);
                this.tableData = data.content;
                this.total = data.totalElements;
                this.thisLoading = false;
            } catch (error) {
                console.log(error)
            }
        },
        async querySysList(queryString,cb){
            try {
                let data = await sysListDataApi({
                    key: queryString || ""
                });
                if (cb) {
                    var list = data.map(el => {
                        return {
                            key: el,
                            value: el
                        };
                    });
                    cb(list);
                } else {
                    this.topviewName = "";
                }
            } catch (error) {
                cb([]);
            }
        },
        async deleteOneData(id){
            try {
                let data = await dictionarydeleteApi(id);
                if(data == 1){
                    alertMessage("修改成功！");
                    this.initData();
                }
            } catch (error) {
                console.log(error)
            }
        },
        changeTimeValue(){
            return num ? moment(num).format("YYYY-MM-DD HH:mm:ss") : "";
        },
        pageChange(num){
            this.formInline.pageIndex = num - 1;
            this.initData("set");
        },
        sizeChange(num){
            this.formInline.pageSize = num;
            this.initData();
        },
        adddictionary(){
            this.$refs.dictionary.changeStatus();
        },
        setSysMsg(item){
            this.$refs.dictionary.changeStatus(item);
        },
        openThisPop(id){
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteOneData(id)
            }).catch(() => {});
        }
    }
}
</script>
<style lang="less" scoped>
@import url("./less/authagent.less");
</style>